<template>
  <div class="filter_editfilter">
    <div class="filter_editfilter_header">
      <el-form inline v-if="state.filterOptions.filter_name != null" >
        <el-form-item v-if="state.filterOptions.filter_obj_code != '' && state.filterOptions.filter_obj_code != null" label="过滤器:" style="width: calc(100% - 8px)">
          <el-input v-model="state.filterOptions.filter_name" placeholder="过滤器名称" class="filter-input"/>
        </el-form-item>
        <el-form-item label="联赛名称:" style="width: calc(100% - 8px)">
          <app-lazy-select
            v-if="state.filterOptions.filter_name != undefined"
            :name="`联赛名称`"
            :url="`/league/get_league_option`"
            :data="state.filterOptions"
            :dataname="`league_id`"
            @changelazyselect="store.changelazyselect"
          />
        </el-form-item>
        <el-form-item label="赛季时间:" style="width: calc(100% - 8px)">
          <el-select
            v-model="state.filterOptions.season_list"
            multiple
            :max-collapse-tags="2"
            collapse-tags
            placeholder="赛季时间"
            style="width: 100%"
          >
            <el-option v-for="item in state.seasonList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="filter_editfilter_content" :style="state.filterOptions.filter_obj_code != '' && state.filterOptions.filter_obj_code != null ? 'height: calc(100% - 192px);' : 'height: calc(100% - 144px);'">
      <List v-if="state.filterOptions.filter_name != null" />
    </div>
    <div class="filter_editfilter_footer">
      <div class="editfilter_footer_buttons">
        <el-button class="button button1" @click="store.resetfilter()">重置</el-button>
        <el-button class="button button3" @click="store.confirm()">确定</el-button>
        <el-button class="button button2" type="primary" @click="store.openfiltername()"
          >保存过滤器</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import config from '@/config'
import { inject } from 'vue'
import List from './List.vue'

const { store, state } = inject('Filter')

</script>

<style lang="scss" scoped>
.filter_editfilter {
  width: 450px;
  min-width: 450px;
  // width: 458px;
  // min-width: 458px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 0 16px 0;
}

.view_filter_button {
  height: 48px;
  width: 100%;
}

.filter-input{
  width: 370px;
  margin-left: auto;
}


.filter_editfilter_content {
  height: calc(100% - 144px);
  // flex: 1;
}

.filter_editfilter_footer {
  padding-top: 16px;
}

.editfilter_footer_buttons {
  display: flex;
  justify-content: center;
}

.button {
  border-radius: 0;
}

.button1,
.button1:hover {
  width: 60px;
  height: 32px;
  background-color: #f5f5f5;
  font-size: 14px;
  color: #333;
  border-color: #f5f5f5;
}

.button2,
.button2:hover {
  width: 102px;
  height: 32px;
  background-color: #e92937;
  font-size: 14px;
  color: #fff;
  border-color: #e92937;
  margin-left: 16px;
}

.button3,
.button3:hover {
  width: 60px;
  height: 32px;
  background-color: #e92937;
  font-size: 14px;
  color: #fff;
  border-color: #e92937;
  margin-left: 16px;
}

.statistics {
  position: fixed;
  bottom: 0;
  z-index: 8;
  right: 25%;
  width: 300px;
  height: 40px;
  padding: 8px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
  background-image: linear-gradient(to left, #ffa400, #ff7900);
  display: flex;
  font-size: 16px;
  font-weight: 600;
  color: #fff;

  img {
    width: 24px;
    height: 24px;
  }

  user-select: none;
  /* 对现代浏览器有效 */
  -webkit-user-select: none;
  /* 对 Safari 有效 */
  -moz-user-select: none;
  /* 对 Firefox 有效 */
  -ms-user-select: none;
  /* 对 IE 和 Edge 有效 */
}
</style>

<style>
.filter_editfilter_header .el-form--inline .el-form-item {
  margin-bottom: 16px;
}

.filter_editfilter_header .el-select__wrapper {
  border-radius: 0;
  background-color: #fff;
  border: 1px solid #ebebeb;
}
.filter_editfilter_header .el-select__wrapper.is-focused{
  box-shadow:none
}
.el-select-dropdown .el-select-dropdown__item.is-selected{
  color: #e92937;
}
.filter-input .el-input__wrapper{
  background-color: #fff;
  border: 1px solid #ebebeb;
}
.filter-input .el-input__wrapper.is-focus{
  box-shadow:none
}
</style>